<template>
	<view class="add-store">
		<view class="container">
			<view class="store-item">
				<view class="">商品名称：</view>
				<input type="text" style="text-align: center;" value="" v-model="storeObj.name" placeholder="请输入商品名称" />
			</view>
			<view class="store-item">
				<view class="">商品现价：</view>
				<input type="text" style="text-align: center;" value="" v-model="storeObj.pprice"
					placeholder="请输入商品现价" />
			</view>
			<view class="store-item">
				<view class="">商品原价：</view>
				<input type="text" style="text-align: center;" value="" v-model="storeObj.oprice"
					placeholder="请输入商品原价" />
			</view>
			<view class="store-item">
				<view class="">商品库存：</view>
				<input type="text" style="text-align: center;" value="" v-model="storeObj.reportory"
					placeholder="请输入商品库存" />
			</view>
			<view class="store-item">
				<view class="">全城配送：</view>
				<input type="text" style="text-align: center;" value="" v-model="storeObj.delivery"
					placeholder="请输入配送条件" />
			</view>
			<view class="store-item">
				<view class="">商品描述：</view>
				<input type="text" style="text-align: center;" value="" v-model="storeObj.text" placeholder="请输入商品描述" />
			</view>
				<view class="store-item">
					<view class="">
						商品类型：
					</view>
					<uni-data-select
					class="select-item"
					v-model="value"
					:localdata="range"
					@change="change"
					placeholder="请选择商品类型"
					label="商品类型选择"
					></uni-data-select>
				</view>
			<view class="" style="color: #ccc; font-size: 22rpx; margin-left: 16rpx;">
				<text>最多上传9张图片~最少上传7张图片</text>
				{{totalImage}}/9
			</view>
			<view class="uni-uploader__files">
				<block v-for="(image,index) in imageList" :key="index">
					<view class="uni-uploader__file" style="position: relative;">
						<!-- 删除的图标以及删除的 delimage方法传递的参数 -->
						<uni-icons @tap="delimage(index)" class="del" size="20" type="clear"></uni-icons>
						<image ref="files" class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage(index)"></image>
					</view>
				</block>
				<view v-show="imageList.length < 9" class="uni-uploader__input-box">
					<view class="uni-uploader__input" @tap="chooseImage"></view>
				</view>
			</view>
		</view>
		<view class="add-goods">
			<view class="add-goods-item" @tap="submit" :disabled="disable">提交</view>
		</view>
	</view>
</template>

<script>
	import $http from '../../common/api/request.js'
	import {v4 as uuidv4} from 'uuid'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				current: 0,
				value: 0,
				disable:true,
				imageList:[],
				partImgUrl:[], //存储外链
				qiniuBucketURLPrefix :'verification.zydxydsxt.top/' ,//七牛云的外链
				range: [{
						value: 0,
						text: "促销商品"
					},
					{
						value: 1,
						text: "热销商品"
					},
					{
						value: 2,
						text: "推荐商品"
					},
				],
				storeObj: {
					name: '五粮液',
					pprice: '188',
					oprice: '388',
					reportory: '555',
					delivery: '包邮到家',
					text: '经典好喝的五粮液集团，简直没得说'
				},
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			}),
			totalImage(){
				return this.imageList.length
			}
		},
		methods: {
			// 删除图片
			delimage(index){
				this.imageList.splice(index, 1);
			},
			// 预览图片
			previewImage(index){
				uni.previewImage({
					urls:this.imageList ,//需要预览的图片连接列表
					current:this.imageList[index] //当前显示的图片连接
				})
			},
			change(e) {
				console.log(e);
			},
			chooseImage(){
				uni.chooseImage({
					count:9,//最多可以选择的图片张数
					sizeType:['compressed'],//original原图 compressed压缩图
					sourceType:['album','camera'] ,//album 从相册选图，camera 使用相机
					// 成功则返回图片的本地文件路径列表 tempFilePaths
					success: (chooseImageRes) => {
						this.imageList.push(...chooseImageRes.tempFilePaths)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.imageList.forEach((item,index)=>{
							$http.request({
								url:'/storeToken',
								method:'POST'
							}).then((res)=>{
								// 唯一码
								const uuid = uuidv4()
								let uploadMsg = res;
								let uniqueCode = uuid;
								let postUrl = 'http://upload-z2.qiniu.com'
								uni.uploadFile({
									url:postUrl,
									fileType: "image",
									filePath:item,
									name:'file',
									formData:{
										'key':uniqueCode.slice(0,10),
										'token':uploadMsg
									},
									// 经过escape()转转义之后的文件名和图片链接一部分一致
									success: (uploadFileRes) => {
										let key = JSON.parse(uploadFileRes.data).key
										let partImgUrl = escape(uniqueCode.slice(0,10));
										this.partImgUrl.push({
											imgUrl:'http://'+this.qiniuBucketURLPrefix + partImgUrl 
										})
									},
									fail: (err) => {
										console.log('fail',err);
									}
								})
				
							}).catch((err)=>{
								console.log(err);
							})
						})
					}
				})
			},
			submit() {
				let type = ''
				if(this.value == 0){
					this.type = 'discountgoods'
				}else if(this.value == 1){
					this.type = 'hotgoods'
				}else if(this.value == 2){
					this.type = 'recommendgoods'
				}
				if(this.imageList.length<7){
					uni.showToast({
						title:'最少上传7张图片',
						iocn:'none'
					})
				}else{
					$http.request({
						url: '/addGoods',
						method: 'POST',
						header: {
							token: true
						},
						data: {
							storeObj: this.storeObj,
							imageValue: this.partImgUrl,
							userInfo: this.userInfo,
							type:this.type
						}
					}).then((res) => {
						uni.navigateBack({
							delta:1
						})
					}).catch(() => {
						uni.showToast({
							title: "请求失败了哦",
							icon: "error"
						})
					})
				}
			}
		}
	}
</script>

<style scoped>
	.add-store {
		width: 750rpx;
	}

	.store-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 0;
		width: 100%;
		border-bottom: 2rpx solid #CCCCCC;
	}
	
	.store-item input {
		flex: 1;
		text-align: left;
		padding-left: 10rpx;
	}
	uni-data-select{
		width: 100%;
		height: 200rpx;
		padding: 12rpx 0;
	}
	.add-goods {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		background-color: #49bdfb;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}

	.container {
		margin-bottom: 80rpx;
	}
	.del{
		position: absolute;
		top: 0rpx;
		right: 0%;
		z-index: 999;
	}
	
</style>
